{% extends "base.html" %}
{% block content %}
    <script type="text/javascript">
    $(document).ready(function(){
	    $("input[name='map_name']:radio").change(function(){
	        var selectedMap = $("input[name='map_name']:checked").val();
	        var mapData = $("input[name='" + selectedMap + "_data']").val();
	        var mapURL = "http://maps.google.com/staticmap?" + mapData + "&size=640x640&key={{api_key}}&sensor=false";

	        $("#map_preview").hide();
	        $("#map_preview").attr("src",mapURL);
	        $("#map_preview").fadeIn("slow");
	    });
    });
    </script>
    <form id="delete_form" action="/delete/" method ="POST" style="width:20%;">
        <fieldset>
            <legend>Your Saved Maps</legend>
            {% for map in maps %}
            <input type="radio" name="map_name" value="{{map.name}}">{{map.name}}</input>
            <input type="hidden" name="{{map.name}}_data" value="center={{map.center}}&zoom={{map.zoom}}&path=rgba:0xff0000ff,weight:5{%for marker in map.markers %}|{{marker}}{% endfor %}"></input>
            <br />
            {% endfor %}
            <input type="submit" value="Delete Map" />
        </fieldset>
    </form>
    <img class="map_preview" id="map_preview" src=""></img>    
{% endblock %}